<template>
    <div class="box">
        <div class="box__top">
            <div class="box__top__info">
                <div class="box__top__img"><img src="./100348.jpg" alt=""></div>
                <div class="box__top__name">热心市民李先生</div>
                <div class="box__top__id"> ID: 1069643013</div>
                <div class="box__top__other">
                    <div class="box__top__itembox" v-for="item in myItem">
                        <div class="item">{{item.name}}</div>
                        <div class="num">{{item.num}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box__infolist">
            <div class="box__infolist__list">
                <div class="line" v-for="item in infolistItem">
                    <div class="line__item" style="flex:0.5;margin-left: 20px;"> <span class="iconfont" v-html="`${item.icon1}`"></span> </div>
                    <div class="line__item" style="text-align: left;">{{item.text}}</div>
                    <div class="line__item" style="text-align: right;margin-right: 10px; "> <span class="iconfont" style="font-size: 20px;" v-html="`${item.icon2}`"></span> </div>
                </div>
            </div>
        </div>
        <DockerVue></DockerVue>
    </div>
</template>
<script>
import DockerVue from '@/components/Docker'
export default {
    components:{
        DockerVue
    },
    setup(){
        const myItem = [
            {name: '红包', num: '218'},
            {name: '优惠券', num: '12张'},
            {name: '鲜豆', num: '88'},
            {name: '白条', num: '1000'},
        ]
        const infolistItem=[
            {icon1: '&#xe608;',text: '我的钱包', icon2: '&#xe6f8;'},
            {icon1: '&#xe64c;',text: '我的地址', icon2: '&#xe6f8;'},
            {icon1: '&#xe625;',text: '客服与帮助', icon2: '&#xe6f8;'}
        ]
        return {myItem,infolistItem}
    }
}
</script>
<style lang="scss" scoped>
.box{   
    &__top{
        width: 100%;
        height: 250px;
        border-bottom-left-radius:35% ;
        border-bottom-right-radius:35% ;
        background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
        position: relative;
        &__info{
            width: 339px;
            height: 203px;
            background: #FFFFFF;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
            border-radius: 8px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
        }
        &__img{
            position: absolute;
            left: 50%;
            top: -25%;
            transform: translateX(-50%);
            img{
                width: 94px;
                height: 94px;
                border-radius: 50%;
            }
        }
        &__name{
            text-align: center;
            margin-top: 59px;
            font-size: 24px;
            color: #262628;
            letter-spacing: 0.19px;
            text-align: center;
            line-height: 36px;
            font-weight: bold;
        }
        &__id{
            margin-top: 4px;
            font-size: 14px;
            color: #C1C0C9;
            text-align: center;
        }
        &__other{
            margin-top: 25px;
            display: flex;
            text-align: center;
        }
        &__itembox{
            flex: 1;
            .item{
                font-size: 12px;
                color: #C1C0C9;
            }
            .num{
                margin-top: 5px;
                font-size: 20px;
                color: #262628; 

            }
        }
    }
    &__infolist{
        position: relative;
        height: 146px;
        &__list{
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
            border-radius: 8px;
            width: 339px;
            height: 146px;
            background-color: #fff;
            display: flex;
            flex-direction:column;

            .line{
                line-height: calc(146px / 3);
                flex: 1;
                display: flex;
                &__item{
                    flex: 1;
                }
            }
        }
    }
}
</style>